<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.NewGatewayController" id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-entity-new page" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <fieldset>
      <div class="row">
        <h2 class="title" apiman-i18n-key="new-gateway">New Gateway</h2>
      </div>
      <!-- Helpful hint -->
      <div class="row">
        <p apiman-i18n-key="new-gateway-help-text" class="col-md-6 apiman-label-faded">Create a new API gateway for use
          by APIs. When publishing an API, at least one gateway must be specified so that API configuration details can
          be published to the appropriate place.</p>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- Choose gateway name -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="gateway-name">Gateway Name</dt>
          <dd>
            <input id="apiman-gateway-name" ng-model="gateway.name" name="name" type="text" class="apiman-form-control form-control name entityname" apiman-i18n-key="enter-gateway-name" placeholder="Enter gateway name...">
          </dd>
        </dl>
      </div>
      <!-- Description of gateway -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="description">Description</dt>
          <dd>
            <textarea ng-model="gateway.description" data-field="description" type="text" class="apiman-form-control form-control description" id="apiman-description" apiman-i18n-key="enter-gateway-description" placeholder="Enter gateway description (optional)..."></textarea>
          </dd>
        </dl>
      </div>
      <!-- Configuration Endpoint -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="config-endpoint">Configuration Endpoint</dt>
          <dd>
            <input ng-model="configuration.endpoint" type="url" name="configEndpoint" type="text" class="apiman-form-control form-control description" id="config-endpoint" apiman-i18n-key="enter-gateway-config-endpoint" placeholder="Enter configuration endpoint...">
          </dd>
        </dl>
      </div>
      <!-- Authentication Credentials -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="credentials">Configuration Endpoint Credentials</dt>
          <dd>
            <table class="form-table">
              <tr>
                <td class="td-label">
                  <span apiman-i18n-key="username">Username:</span>
                </td>
                <td>
                  <input id="endpoint-username" ng-model="configuration.username" name="username" type="text" class="apiman-form-control form-control name entityname" apiman-i18n-key="enter-gateway-username" placeholder="Username...">
                </td>
              </tr>
              <tr>
                <td class="td-label">
                  <span apiman-i18n-key="password">Password:</span>
                </td>
                <td>
                  <input id="endpoint-password" ng-model="configuration.password" data-field="password" type="password" class="apiman-form-control form-control name entityname" apiman-i18n-key="enter-gateway-password" placeholder="Password...">
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <input id="endpoint-password-confirm" ng-model="passwordConfirm" data-field="passwordConfirm" type="password" class="apiman-form-control form-control name entityname" apiman-i18n-key="enter-gateway-password-confirm" placeholder="Confirm Password...">
                </td>
              </tr>
            </table>
          </dd>
        </dl>
      </div>
      <div class="row">
        <button id="test-gateway" ng-disabled="!isValid" apiman-action-btn="" data-field="testButton" ng-click="testGateway()" class="btn btn-default" name="testButton" apiman-i18n-key="test-gateway" placeholder="Testing..." data-icon="fa-cog">Test Gateway</button>
      </div>
      <div class="row" ng-show="testResult == 'success'">
        <div class="alert alert-success description" style="margin-top: 10px">
          <span class="pficon pficon-ok"></span>
          <strong apiman-i18n-key="gateway-config-valid.title">Gateway Configuration Valid</strong>
          <div apiman-i18n-key="gateway-config-valid.msg">Your gateway configuration is correct.</div>
        </div>
      </div>
      <div class="row" ng-show="testResult == 'error'">
        <div class="alert alert-danger description" style="margin-top: 10px">
          <span class="pficon-layered">
            <span class="pficon pficon-error-octagon"></span>
            <span class="pficon pficon-error-exclamation"></span>
          </span>
          <strong apiman-i18n-key="gateway-config-invalid.title">Gateway Configuration Invalid</strong>
          <div apiman-i18n-key="gateway-config-invalid.msg">The test has not been successful. See details below for
            further information.
          </div>
          <div style="margin-top: 8px">
            <pre>{{ testErrorMessage }}</pre>
          </div>
        </div>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- Create Button -->
      <div class="row">
        <button id="create-gateway" ng-disabled="!isValid" apiman-action-btn="" class="btn btn-primary" data-field="createButton" name="createButton" apiman-i18n-key="create-gateway" placeholder="Creating..." data-icon="fa-cog" ng-click="createGateway()">Create Gateway</button>
        <a id="cancel" href="javascript:window.history.back()" class="btn btn-default btn-cancel" apiman-i18n-key="cancel">Cancel</a>
      </div>
      </fieldset>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </body>
</html>
